<template>
	<view class="pageContainer">
        <view @click="gotoDetail(item)" class="imageContainer" v-for="(item, index) in albumList" :key="index">
            <image class="icon" :src="item.cover" mode=""></image>
            <view class="title text-1line-ellipsis">
                {{item.name}}
            </view>
        </view>
        
	</view>
</template>

<script>
    const api = require("@/static/js/api.js")
    const utils = require("@/static/js/utils.js")
    import {
        mapState,
        mapMutations,
        mapActions
    } from 'vuex';
    let that = null

    
	export default {
		data() {
			return {
                albumList:[],
			};
		},
        
        computed: {
            ...mapState({
                hasLogin: state => state.userInfo.hasLogin,
                isAuthPhone: state => state.userInfo.isAuthPhone,
                isAuthUserInfo: state => state.userInfo.isAuthUserInfo, 
                isSeller: state => state.userInfo.isSeller,
                sellerObj: state => state.userInfo.sellerObj,
                buyerObj: state => state.userInfo.buyerObj,
                shopInfo: state => state.userInfo.shopInfo,
            }),
        },
        
        onLoad(options) {
            that = this;
            that.getProjectAlbums()
        },
        onShow() {
      
        },
        methods:{ 
            ...mapMutations(['setUserInfo', 'setLoginStatus', 'setUserId',"setOrigin"]),

            getProjectAlbums() {
                let that = this
                api.getProjectAlbums({
                    param: {
                        
                    }
                }).then(res => {
                    console.log(res)
                    if (res.success||(res.code==0)) {  
                        that.albumList = res.data
                    }
                })
            },
            gotoDetail(item){
                uni.navigateTo({
                    url:'./buildingAlbumDetail?id='+item.id
                })
            },
        }
	}
</script>

<style lang="scss">
    page{
        background-color: #F3F3F3;
    }
    .pageContainer{
        display: flex;
        flex-wrap: wrap;
    }
    .imageContainer{
        width: 348rpx;
        height: 362rpx;
        background: #FFFFFF;
        box-shadow: 2rpx 2rpx 8rpx 4rpx #EEEEEE;
        border-radius: 20rpx;
        padding: 18rpx;
        box-sizing: border-box;
        margin-top: 32rpx;
        margin-left: 18rpx;
        .icon{
            background-color: #F3F3F3;
            width: 100%;
            height: 256rpx;
        }
        .title{
            width: 100%;
            font-size: 28rpx;;
            color: #666666;
            line-height: 40rpx;
            margin-top: 24rpx;
            text-align: center;
        }
    }
</style>
